<template>
  <card style="height: 70%;">
    <Divider orientation="left">
      个人信息
    </Divider>
    <el-row type="flex" justify="space-around" align="middle">
      <el-col :span="4">
        <img :src="faceuri" alt="avatar" style="width: 100%;">
        <!-- <el-button type="primary">
          修改人脸图像
        </el-button> -->
      </el-col>
      <el-col :span="6" class="text">
        <p>用户编号：{{ id }}</p>
        <p>
          部门：{{ dept }}
        </p>
        <p>
          邮箱：{{ email == 'undefined' ? '无' : email }}
        </p>
      </el-col>
      <el-col :span="6" class="text">
        <p>用户姓名：{{ username }}</p>
        <p>
          手机号：{{ tel == 'undefined' ? '无' : tel }}
        </p>
        <p>
          用户密码：{{ password }}
          <img src="../../assets/icons/修改.png" alt="update" class="update" @click="handleUpdate('password')">
        </p>
      </el-col>
    </el-row>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" append-to-body width="40%" top="30vh">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item :prop="active" :label="formLabel" label-width="120px">
          <el-select v-if="active === 'dept'" v-model="form[active]" placeholder="" style="width: 80%;">
            <el-option v-for="item in depts" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
          <el-input v-else v-model="form[active]" style="width: 80%;" />
        </el-form-item>
        <el-form-item v-if="isPwd" prop="newpassword" label="新密码" label-width="120px">
          <el-input v-model="form.newpassword" style="width: 80%;" />
        </el-form-item>
        <el-form-item v-if="isPwd" prop="repassword" label="确认密码" label-width="120px">
          <el-input v-model="form.repassword" style="width: 80%;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="updateData">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </card>
</template>

<script>
import Card from '@/components/Card'
import { Divider } from 'iview'
import { mapGetters } from 'vuex'
import { validatePass } from '@/utils/validate'
import { findAllDept } from '@/api/dept'
import { updatePassword } from '@/api/user'

export default {
  components: { Card, Divider },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (!validatePass(value)) {
        callback(new Error('密码仅支持数字或英文'))
      } else {
        if (this.form.repassword !== '') {
          this.$refs.form.validateField('repassword')
        }
        callback()
      }
    }
    const validateRePassword = (rule, value, callback) => {
      if (value !== this.form.newpassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      avatar: '../../assets/icons/默认头像.png',
      depts: [],
      active: 'dept',
      dialogTitle: '',
      formLabel: '',
      isPwd: false,
      dialogFormVisible: false,
      form: {
        dept: this.dept,
        tel: '',
        email: '',
        password: '',
        newpassword: '',
        repassword: ''
      },
      rules: {
        dept: [
          { required: true, message: '请输入所属部门', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newpassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 16, message: '请正确输入密码(密码长度6 ~ 16位)', trigger: 'blur' },
          { validator: validatePassword, trigger: 'blur' }
        ],
        repassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { min: 6, max: 16, message: '请正确输入密码(密码长度6 ~ 16位)', trigger: 'blur' },
          { validator: validateRePassword, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'username',
      'dept',
      'tel',
      'email',
      'password',
      'faceuri'
    ])
  },
  created() {
    this.form.dept = this.dept
    this.form.tel = this.tel === null ? this.tel : ''
    this.form.email = this.email === null ? this.email : ''
    this.getDepts()
  },
  methods: {
    async getDepts() {
      const res = await findAllDept()
      this.depts = res.data.data
    },
    handleUpdate(choice) {
      this.active = choice
      this.isPwd = false
      switch (choice) {
        case 'dept':
          this.formLabel = '部门:'
          this.dialogTitle = '修改部门'
          break
        case 'tel':
          this.formLabel = '手机号:'
          this.dialogTitle = '修改手机号'
          break
        case 'email':
          this.formLabel = '邮箱:'
          this.dialogTitle = '修改邮箱'
          break
        case 'password':
          this.formLabel = '旧密码:'
          this.dialogTitle = '修改密码'
          this.isPwd = true
          break
        default:
          break
      }
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    async updateData() {
      switch (this.active) {
        case 'dept':
          break
        case 'tel':
          break
        case 'email':
          break
        case 'password': {
          const res = await updatePassword(this.form.password, this.form.newpassword)
          if (!res.data.code) {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
          }
          break
        }
        default:
          break
      }
    }
  }
}
</script>

<style scoped>
.ivu-divider {
  font-size: 24px;
  font-weight: 400;
  margin-top: 1em;
  padding-left: 2em;
  padding-right: 2em;
}

.ivu-divider:before,
.ivu-divider:after {
  border-top-color: #F3AC8E;
}

.el-row {
  height: 80%;
}

.el-col {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 20px;
  text-align: left;
}

.el-col p,
.el-col button {
  margin-top: 20px;
  margin-bottom: 20px;
}

.update {
  height: 1.5em;
  padding-left: 1em;
  cursor: pointer;
}

.update:hover {
  opacity: .7;
}

</style>
